<template>
  <!-- 培训资料管理主页面 -->
  <div class="training-management">
    <!-- 页面头部：标题和上传按钮 -->
    <div class="header">
      <h2>培训资料管理</h2>
      <!-- 只有档案管理员才能看到上传按钮 -->
      <el-button type="primary" @click="showUploadDialog" v-if="hasPermission(['档案管理员'])">
        上传培训资料
      </el-button>
    </div>

    <!-- 培训资料列表表格 -->
    <el-table :data="trainings" style="width: 100%" v-loading="loading">
      <!-- 标题列 -->
      <el-table-column prop="title" label="标题" width="200"></el-table-column>
      <!-- 描述列，支持文本溢出省略 -->
      <el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
      <!-- 文件名列，显示去除UUID前缀的原始文件名 -->
      <el-table-column prop="filePath" label="文件名" width="200">
        <template slot-scope="scope">
          {{ getFileName(scope.row.filePath) }}
        </template>
      </el-table-column>
      <!-- 上传人列 -->
      <el-table-column prop="uploaderName" label="上传人" width="120"></el-table-column>
      <!-- 上传时间列，格式化显示 -->
      <el-table-column prop="uploadTime" label="上传时间" width="180">
        <template slot-scope="scope">
          {{ formatDate(scope.row.uploadTime) }}
        </template>
      </el-table-column>
      <!-- 状态列，使用标签显示不同颜色 -->
      <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <!-- 操作列：下载、审核、删除按钮 -->
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <!-- 下载按钮：只有已发布的资料才显示 -->
          <el-button size="mini" @click="downloadTraining(scope.row)" v-if="scope.row.status === 'published'">下载</el-button>
          <!-- 审核通过按钮：只有企业领导对草稿状态资料才显示 -->
          <el-button size="mini" type="primary" @click="approveTraining(scope.row)" 
                     v-if="userRole === '企业领导' && scope.row.status === 'draft'">
            审核通过
          </el-button>
          <!-- 驳回按钮：只有企业领导对草稿状态资料才显示 -->
          <el-button size="mini" type="warning" @click="rejectTraining(scope.row)" 
                     v-if="userRole === '企业领导' && scope.row.status === 'draft'">
            驳回
          </el-button>
          <!-- 删除按钮：根据权限判断是否显示 -->
          <el-button size="mini" type="danger" @click="deleteTraining(scope.row.trainingId)"
                     v-if="canDelete(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="total, prev, pager, next">
    </el-pagination>

    <!-- 上传培训资料对话框 -->
    <el-dialog title="上传培训资料" :visible.sync="uploadDialogVisible" width="600px">
      <!-- 上传表单 -->
      <el-form :model="trainingForm" :rules="trainingRules" ref="trainingForm">
        <!-- 标题输入框 -->
        <el-form-item label="标题" prop="title">
          <el-input v-model="trainingForm.title"></el-input>
        </el-form-item>
        <!-- 描述输入框 -->
        <el-form-item label="描述" prop="description">
          <el-input type="textarea" :rows="4" v-model="trainingForm.description"></el-input>
        </el-form-item>
        <!-- 文件上传组件 -->
        <el-form-item label="文件" prop="file">
          <el-upload
            ref="upload"
            :auto-upload="false"
            :limit="1"
            :file-list="fileList"
            :on-change="handleFileChange"
            action="#">
            <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
            <div slot="tip" class="el-upload__tip">支持上传文档、视频等培训资料</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <!-- 对话框底部按钮 -->
      <div slot="footer">
        <el-button @click="uploadDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="uploadTraining">上传</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入统一的请求工具
import service from '@/utils/request'

export default {
  name: 'TrainingManagement',
  data() {
    return {
      // 培训资料列表数据
      trainings: [],
      // 加载状态
      loading: false,
      // 分页相关
      currentPage: 1,
      pageSize: 10,
      total: 0,
      // 用户信息
      userRole: '', // 用户角色
      userId: 0,    // 用户ID
      // 上传对话框相关
      uploadDialogVisible: false,
      fileList: [],        // 文件列表
      selectedFile: null,  // 选中的文件
      // 上传表单数据
      trainingForm: {
        title: '',
        description: '',
        uploaderId: 0
      },
      // 表单验证规则
      trainingRules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入描述', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    // 组件创建时初始化用户信息
    // 从localStorage中获取用户信息
    const user = JSON.parse(localStorage.getItem('user') || '{}');
    this.userRole = user.role || '';
    this.userId = user.userId || 0;
    console.log('培训管理 - 初始化用户角色:', this.userRole);
    console.log('培训管理 - 初始化用户ID:', this.userId);
  },
  mounted() {
    // 组件挂载后加载培训资料数据
    this.loadTrainings()
  },
  methods: {
    /**
     * 权限检查方法
     * @param {Array} roles 允许的角色列表
     * @returns {Boolean} 是否有权限
     */
    hasPermission(roles) {
      return roles.includes(this.userRole);
    },
    
    /**
     * 删除权限检查
     * 企业领导可以删除任何培训资料
     * 档案管理员只能删除自己上传的草稿状态资料
     * @param {Object} training 培训资料对象
     * @returns {Boolean} 是否可以删除
     */
    canDelete(training) {
      if (this.userRole === '企业领导') {
        return true;
      }
      if (this.userRole === '档案管理员') {
        return training.uploaderId === this.userId && training.status === 'draft';
      }
      return false;
    },

    /**
     * 加载培训资料列表
     * 根据用户角色加载不同的数据：
     * - 普通员工：只能看到已发布的培训资料
     * - 管理员和领导：可以看到所有培训资料
     */
    async loadTrainings() {
      this.loading = true
      try {
        let url;
        if (this.userRole === '普通员工') {
          // 普通员工只能看到已发布的培训资料
          url = '/api/trainings/published';
        } else {
          // 管理员和领导可以看到所有培训资料
          url = `/api/trainings/page?current=${this.currentPage}&size=${this.pageSize}`;
        }
        
        const response = await service.get(url)
        if (response.data.code === 200) {
          if (this.userRole === '普通员工') {
            // 普通员工接口返回数组
            this.trainings = response.data.data
            this.total = response.data.data.length
          } else {
            // 管理员接口返回分页对象
            this.trainings = response.data.data.records
            this.total = response.data.data.total
          }
        }
      } catch (error) {
        this.$message.error('加载培训资料失败')
      }
      this.loading = false
    },
    
    /**
     * 显示上传对话框
     * 重置表单数据和文件列表
     */
    showUploadDialog() {
      this.uploadDialogVisible = true
      this.trainingForm = {
        title: '',
        description: '',
        uploaderId: this.userId
      }
      this.fileList = []
      this.selectedFile = null
    },
    
    /**
     * 文件选择变化处理
     * @param {Object} file 选中的文件对象
     * @param {Array} fileList 文件列表
     */
    handleFileChange(file, fileList) {
      this.selectedFile = file.raw
      this.fileList = fileList
    },
    
    /**
     * 上传培训资料
     * 验证表单后上传文件和数据到服务器
     */
    async uploadTraining() {
      this.$refs.trainingForm.validate(async (valid) => {
        if (valid) {
          if (!this.selectedFile) {
            this.$message.error('请选择文件')
            return
          }
          
          try {
            // 构建FormData对象
            const formData = new FormData()
            formData.append('file', this.selectedFile)
            formData.append('title', this.trainingForm.title)
            formData.append('description', this.trainingForm.description)
            formData.append('uploaderId', this.trainingForm.uploaderId)
            // 档案管理员上传的培训资料需要审核
            formData.append('status', 'draft')
            
            // 发送上传请求
            const response = await service.post('/api/trainings/upload', formData, {
              headers: {
                'Content-Type': 'multipart/form-data'
              }
            })
            
            if (response.data.code === 200) {
              this.$message.success('上传成功，等待审核')
              this.uploadDialogVisible = false
              this.loadTrainings()
            } else {
              this.$message.error(response.data.message)
            }
          } catch (error) {
            this.$message.error('上传失败')
          }
        }
      })
    },
    
    /**
     * 下载培训资料
     * 创建隐藏链接触发文件下载
     * @param {Object} training 培训资料对象
     */
    downloadTraining(training) {
      // 使用新的下载接口
      const downloadUrl = `/company/api/trainings/download/${training.trainingId}`;
      const link = document.createElement('a');
      link.href = downloadUrl;
      link.download = training.title;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    
    /**
     * 审核通过培训资料
     * 企业领导审核档案管理员上传的培训资料
     * @param {Object} training 培训资料对象
     */
    async approveTraining(training) {
      try {
        const response = await service.put(`/api/trainings/approve/${training.trainingId}`, null, {
          params: { status: 'published' }
        })
        if (response.data.code === 200) {
          this.$message.success('审核通过成功')
          this.loadTrainings()
        } else {
          this.$message.error(response.data.message || '审核失败')
        }
      } catch (error) {
        this.$message.error('审核失败：' + error.message)
      }
    },
    
    /**
     * 驳回培训资料
     * 企业领导驳回档案管理员上传的培训资料
     * @param {Object} training 培训资料对象
     */
    async rejectTraining(training) {
      try {
        await this.$confirm('确认驳回该培训资料？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        const response = await service.put(`/api/trainings/approve/${training.trainingId}`, null, {
          params: { status: 'rejected' }
        })
        if (response.data.code === 200) {
          this.$message.success('驳回成功')
          this.loadTrainings()
        } else {
          this.$message.error(response.data.message || '驳回失败')
        }
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('驳回失败：' + error.message)
        }
      }
    },
    
    /**
     * 删除培训资料
     * 根据权限控制删除操作
     * @param {Number} id 培训资料ID
     */
    async deleteTraining(id) {
      this.$confirm('确认删除此培训资料？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const response = await service.delete(`/api/trainings/${id}`)
          if (response.data.code === 200) {
            this.$message.success('删除成功')
            this.loadTrainings()
          } else {
            this.$message.error(response.data.message)
          }
        } catch (error) {
          this.$message.error('删除失败')
        }
      })
    },
    
    /**
     * 分页变化处理
     * @param {Number} page 新的页码
     */
    handleCurrentChange(page) {
      this.currentPage = page
      this.loadTrainings()
    },
    
    /**
     * 格式化日期显示
     * @param {String} dateStr 日期字符串
     * @returns {String} 格式化后的日期
     */
    formatDate(dateStr) {
      if (!dateStr) return ''
      return new Date(dateStr).toLocaleString()
    },
    
    /**
     * 获取状态标签类型
     * @param {String} status 状态值
     * @returns {String} Element UI标签类型
     */
    getStatusType(status) {
      const typeMap = {
        'published': 'success',
        'draft': 'warning',
        'archived': 'info'
      }
      return typeMap[status] || 'info'
    },
    
    /**
     * 获取状态显示文本
     * @param {String} status 状态值
     * @returns {String} 中文状态文本
     */
    getStatusText(status) {
      const textMap = {
        'published': '已发布',
        'draft': '草稿',
        'archived': '已归档',
        'rejected': '已驳回'
      }
      return textMap[status] || status
    },
    
    /**
     * 从文件路径中提取文件名
     * 处理Windows路径分隔符，去除UUID前缀
     * @param {String} filePath 文件路径
     * @returns {String} 文件名
     */
    getFileName(filePath) {
      if (!filePath) return ''
      // 处理Windows路径分隔符
      const parts = filePath.replace(/\\/g, '/').split('/')
      let fileName = parts[parts.length - 1]
      // 去掉UUID前缀
      if (fileName.includes('_')) {
        fileName = fileName.substring(fileName.indexOf('_') + 1)
      }
      return fileName
    }
  }
}
</script>

<style scoped>
/* 培训资料管理页面样式 */
.training-management {
  padding: 20px;
}

/* 页面头部样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* 分页组件样式 */
.el-pagination {
  margin-top: 20px;
  text-align: center;
}
</style> 